Redesign airdrop milestones for clarity (#1005)#1009
Conversation
Replace the dense SVG TimelineChart and 3-column StatsRow with a 4-segment progress bar plus 4 milestone cards, so users can read the "reach milestones or it burns" stakes at a glance. - CampaignHero: drop TimelineChart (hard-to-parse log/linear/projection overlay) and StatsRow (info absorbed into the new layout). - New SegmentedProgressBar: 4 equal segments, log-scale fill within each, so reaching Bronze visibly fills 25% instead of looking like 1% on a Diamond-anchored bar. Indicator on the active segment. - New MilestoneCard: tier emoji + label, FDV target, CMC rank (prod-only), unlock %, PLOT amount, pool USD, burn %. Reached cards get an accent border + check; future cards dim. - All values come from the API milestones (config-driven, test/prod). - Responsive: 2x2 mobile, 4-column desktop. - Delete MilestoneTrack.tsx (unused after CampaignHero owns the layout). Bumps to 1.3.0 (feature). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
realproject7
left a comment
realproject7
left a comment
There was a problem hiding this comment.
RE2 review: LGTM (chat approval posted; --approve blocked since PR is from same account). Contingent on e2e finishing green.
Walked through CampaignHero.tsx line-by-line against issue #1005 AC:
AC verified:
- SVG chart removed;
MilestoneTrack.tsxdeleted (verified no remaining importers viagrep -rn MilestoneTrack src/ lib/). StatsRowremoved.SegmentedProgressBar(CampaignHero.tsx:116-183): 4 segments, log-scale fill vialowerFdv = i===0 ? t.fdv/10 : tiers[i-1].fdvso reaching Bronze visibly fills the first segment.- Current-FDV indicator: triangle + "Current: $X" under the active partial segment, gated on
currentFdv > 0. NoMath.log10of 0/negative since the fill branch only runs whencurrentFdv > lowerFdv > 0. MilestoneCard(CampaignHero.tsx:187-253): FDV / CMC (prod-only) / Unlock % / PLOT amount / Pool USD / Burn %.- CMC gated by
IS_PROD_MODE = process.env.NEXT_PUBLIC_AIRDROP_MODE !== "test"— build-time inlined on client by Next, correct. - Burn % =
100 - tier.pct(90/70/50/0% for prod, same shape for test). - Visual states: reached →
border-accent+ ✓; current target →border-border; future →border-border opacity-50. Matches issue spec. - Responsive grid:
grid-cols-2 sm:grid-cols-4. - Tier values from API (
buildTiers(data.milestones)); test config respected automatically (#1004 already merged). - A11y: aria labels on segments, ✓ checkmark labelled, indicator triangle aria-hidden.
Other:
- Version bump 1.2.2 → 1.3.0 (2nd-digit feature) per CLAUDE.md.
package-lock.jsonsynced proactively (1.3.0 in both root +packages[""]).- Lock-up proof block from #1003 preserved unchanged (
CampaignHero.tsx:292-306). data-stateattribute on cards (reached/current/future) is a nice testing hook.- Edge cases: all-reached → no indicator; pre-Bronze with
currentFdv=0→ indicator text suppressed.
CI: lint-and-typecheck SUCCESS, Vercel preview SUCCESS, e2e IN_PROGRESS at time of review.
Operator note (not blocking): Per CLAUDE.md, visual snapshot updates are manual-only — recommend running gh workflow run update-snapshots.yml after merge to refresh snapshots for this UI change.
Approving from RE2.
project7-interns
left a comment
project7-interns
left a comment
There was a problem hiding this comment.
Verdict: APPROVE
Summary
The PR satisfies #1005: the dense SVG chart and stats row are removed, the replacement segmented progress bar and milestone cards cover the milestone, burn, CMC, unlock, PLOT, and pool-value information, and the values are driven from the config-backed milestone API.
Findings
- None.
Decision
Approved. package.json and package-lock.json are both synced to 1.3.0, the #1003 lock-up proof link remains intact, and CI is green for lint/typecheck and e2e.
2 participants
Summary
Removes the dense SVG
TimelineChartand 3-columnStatsRow, replaces with a segmented progress bar + 4 milestone cards so users can grasp the airdrop stakes at a glance. Also deletes the now-unusedMilestoneTrackcomponent. Closes #1005.SegmentedProgressBar(new): 4 equal segments, log-scale fill within each. Reaching Bronze visibly fills 25% instead of looking like ~1% on a Diamond-anchored bar. Current-FDV indicator on the active segment.MilestoneCard(new): tier emoji + label, FDV target, CMC rank (prod-only, static lookup#1900/[Bug] Agents page stuck: Manage tab shows 'no agents' but Register tab is hidden #950/Fix 429 rate limits — batch transport, memory cache, more endpoints #400/Fix Farcaster identity: use Steemhunt API (free) with Neynar fallback #250), unlock %, PLOT amount, pool USD, burn %. Reached → accent border + ✓; future → dimmed.grid-cols-2mobile (2x2),sm:grid-cols-4desktop (1 row)./api/airdrop/statusmilestones response, so test/prod modes are respected automatically (depends on Airdrop: MilestoneTrack uses hardcoded FDV targets instead of config #1004, already merged).MilestoneTrack.tsxdeleted — it had no remaining importers andCampaignHeronow owns the milestone layout end-to-end.Test plan
npm run typecheckpassesnpm run lintpasses (no new errors onCampaignHero.tsx)NEXT_PUBLIC_AIRDROP_MODE=test): cards show $7K / $10K / $35K / $50K with no CMC line~#1900/~#950/~#400/~#250CMC ranksUpdate Visual Snapshotsworkflow if the operator wants snapshots refreshed (per CLAUDE.md, this is manual)Notes for reviewers
process.env.NEXT_PUBLIC_AIRDROP_MODE !== "test", so this is build-time inlined and works for both client and server-rendered runs.bronze.fdv / 10for the first segment and the previous tier's FDV thereafter. This was the simplest mapping that makes "Pre-Bronze" non-zero progress feel proportional without inventing a new data field.🤖 Generated with Claude Code